import React, { useMemo } from 'react';
import { Checkbox } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import SecondImg from '../SecondImg'
export default (props) => {
  const { getChecked, item, selected, handlechange, level, checkboxTitle, showIcon, style = {} } = props;

  const indeterminate = useMemo(() => {
    const itemKeys = item.sectionItemList.map((ele) => ele.Key);
    const selectAll = selected.filter((ele) => itemKeys.includes(ele));
    const itemselectAll = itemKeys.every((ele) => selected.includes(ele));
    if (itemKeys.length == selectAll.length || selectAll.length == 0 || itemselectAll) {
      return false;
    }
    return true;
  }, [selected, item]);

  const CustomCheckBox = useMemo(() => {
    if (checkboxTitle) {
      return <Checkbox
        checked={getChecked(item)}
        indeterminate={indeterminate}
        onChange={(e) => {
          handlechange(e, item.sectionItemList, level, true);
        }}
        style={style}
        onClick={(e) => e.stopPropagation()}

      >
        <SecondImg Icon={item.Icon} />
        {checkboxTitle}
        {showIcon && <InbizIcon
          type={'icon-ic-arrow-down-bold'}
        />}
      </Checkbox>
    }
    return <Checkbox
      checked={getChecked(item)}
      indeterminate={indeterminate}
      onChange={(e) => {
        handlechange(e, item.sectionItemList, level, true);
      }}
      style={style}
      onClick={(e) => e.stopPropagation()}

    >
      {showIcon && <InbizIcon
        type={'icon-ic-arrow-down-bold'}
      />}
    </Checkbox>
  }, [checkboxTitle, selected])

  return CustomCheckBox
};
